import * as React from 'react';
import { DataSet, Lov } from 'choerodon-ui/pro/es';
import axios, { AxiosRequestConfig } from 'axios';
import './App.css';
import { FieldType, FieldIgnore } from 'choerodon-ui/pro/es/data-set/enum';
import Record from 'choerodon-ui/pro/es/data-set/Record';

const lovDefineData =  {
  _token: '374d0d9fba56d362e8b70406b9370c06',
  objectVersionNumber: 1,
  code: 'LOV_CODE',
  description: '快码',
  height: 300,
  lovId: 10015,
  lovItems: [
    {
      _token: 'e09279e3c54846feb32319252396a745',
      objectVersionNumber: 1,
      lovItemId: 10033,
      lovId: 10015,
      display: '代码',
      gridFieldName: 'code',
      gridFieldWidth: 150,
      gridFieldAlign: 'left',
      autocompleteField: 'Y',
      conditionField: 'Y',
      isAutocomplete: 'N',
      gridField: 'Y',
      conditionFieldWidth: null,
      conditionFieldLabelWidth: null,
      conditionFieldType: null,
      conditionFieldName: null,
      conditionFieldTextfield: null,
      conditionFieldNewline: 'N',
      conditionFieldSelectUrl: null,
      conditionFieldSelectVf: null,
      conditionFieldSelectTf: null,
      conditionFieldSelectCode: null,
      conditionFieldLovCode: null,
      conditionFieldSequence: 1,
      gridFieldSequence: 1,
    },
    {
      _token: 'cf06481a41189639629b87e0d2ad8674',
      objectVersionNumber: 1,
      lovItemId: 10034,
      lovId: 10015,
      display: '描述',
      gridFieldName: 'description',
      gridFieldWidth: 250,
      gridFieldAlign: 'left',
      autocompleteField: 'Y',
      conditionField: 'Y',
      isAutocomplete: 'N',
      gridField: 'Y',
      conditionFieldWidth: null,
      conditionFieldLabelWidth: null,
      conditionFieldType: null,
      conditionFieldName: null,
      conditionFieldTextfield: null,
      conditionFieldNewline: 'N',
      conditionFieldSelectUrl: null,
      conditionFieldSelectVf: null,
      conditionFieldSelectTf: null,
      conditionFieldSelectCode: null,
      conditionFieldLovCode: null,
      conditionFieldSequence: 2,
      gridFieldSequence: 2,
    },
  ],
  placeholder: '请选择快码',
  sqlId: 'CodeMapper.select',
  customSql: null,
  queryColumns: 1,
  customUrl: null,
  textField: 'description',
  title: '父级快码',
  valueField: 'code',
  width: 500,
  delayLoad: 'N',
  needQueryParam: 'N',
  editableFlag: 'Y',
  canPopup: 'Y',
  lovPageSize: '10',
  treeFlag: 'N',
  idField: null,
  parentIdField: null,
};

const lovData = {
  rows: [
    {
      _token: '5fd2371f43d3c75c44682b0750e7bfb5',
      objectVersionNumber: 2,
      code: 'HR.EMPLOYEE_GENDER',
      codeId: 10001,
      codeValues: null,
      description: '性别',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: 'd8f3d1a86b47be97d570220f09f9da70',
      objectVersionNumber: 1,
      code: 'HR.EMPLOYEE_STATUS',
      codeId: 10002,
      codeValues: null,
      description: '员工状态',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: 'fef2a3f782a4aef3f550590981f54b11',
      objectVersionNumber: 1,
      code: 'SYS.ALIGN_TYPE',
      codeId: 10003,
      codeValues: null,
      description: '对齐方式',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: 'f2d56a73573733af27b46d981771f692',
      objectVersionNumber: 1,
      code: 'SYS.CAPTCHA_POLICY',
      codeId: 10004,
      codeValues: null,
      description: '验证码策略',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: '690beb6510bccb2eeb906c736f7cfdc9',
      objectVersionNumber: 1,
      code: 'SYS.LOV_EDITOR_TYPE',
      codeId: 10005,
      codeValues: null,
      description: 'LOV编辑器类型',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: '1d600f30fa2bfbf98061c8a3cb9a7c6c',
      objectVersionNumber: 1,
      code: 'SYS.PRIORITY_LEVEL',
      codeId: 10006,
      codeValues: null,
      description: '模板优先级',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: '457a1217cc9343c41d41d5de1e2d6f1e',
      objectVersionNumber: 1,
      code: 'SYS.PROFILE_LEVEL_ID',
      codeId: 10007,
      codeValues: null,
      description: '配置文件级别',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: '50f8dd1303a2c82557246dc296cc9d94',
      objectVersionNumber: 1,
      code: 'SYS.RESOURCE_TYPE',
      codeId: 10008,
      codeValues: null,
      description: '资源类型',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: 'a8830b9049e26a3b2cdd851d42a02b97',
      objectVersionNumber: 1,
      code: 'SYS.TIME_ZONE',
      codeId: 10009,
      codeValues: null,
      description: '时区',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
    {
      _token: '11cb91cfc0d1d59335ba6607e42c640c',
      objectVersionNumber: 1,
      code: 'SYS.USER_STATUS',
      codeId: 10010,
      codeValues: null,
      description: '用户状态',
      type: 'USER',
      enabledFlag: 'Y',
      parentCodeId: null,
      parentCodeDescription: null,
    },
  ],
  success: true,
  total: 35,
};

class App extends React.Component {
  state = {
    recordData: {},
  }
  ds = new DataSet({
    autoCreate: true,
    axios,
    fields: [
      { 
        name: 'code', 
        type: 'object' as FieldType, 
        lovCode: 'LOV_CODE',
        lovDefineAxiosConfig: (): AxiosRequestConfig => {
          return {
            adapter: (config: AxiosRequestConfig) => {
              return Promise.resolve({
                data: {},
                status: 200,
                statusText: '200',
                headers: {},
                config,
              });
            },
            method: 'GET',
            transformResponse: () => {
              return lovDefineData;
            }
          };
        },
        lovQueryAxiosConfig: (): AxiosRequestConfig => {
          return {
            adapter: (config: AxiosRequestConfig) => {
              return Promise.resolve({
                data: {},
                status: 200,
                statusText: '200',
                headers: {},
                config,
              });
            },
            url: '/abc/def',
            validateStatus: (status) => {
              return true;
            },
            method: 'GET',
            transformResponse: () => {
              return lovData;
            }
          };
        },
        multiple: true, 
        required: true, 
        defaultValue: [{}],
        // ignore: FieldIgnore.always,
        ignore: 'always' as FieldIgnore,
      },
      { 
        name: 'code_code', 
        type: 'string' as FieldType, 
        bind: 'code.codeId', 
      },
      { 
        name: 'code_name', 
        type: 'string' as FieldType, 
        bind: 'code.description', 
      },
    ],
    events: {
      update: ({ record, name, value, oldValue }: { record: Record, [key:string]: any }) => {
        this.setState({
          recordData: record.toJSONData(),
        });
        console.log(record.toJSONData());
        console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
      },
    },
  });

  render() {
    return (
      <div className="App">
        <h2>多选lov数据结构</h2>
        <Lov dataSet={this.ds} name="code" placeholder="复选LOV" />
        <pre style={{ textAlign: 'left' }}>
          {
            JSON.stringify(this.state.recordData, null , 2)
          }
        </pre>
        <span>
          asfafas
          f
          asd
          fas
          df
          asdf
        </span>
      </div>
    );
  }
}


export default App;
